<template>
	<div class="index">
		<div class="sreePublic">
			<div id="" style="text-align: center;">
				<em class="iconfont" @click="vfun_back">&#xe61f;</em>
			</div>
			账号管理
		</div>
		<div>
			<div class="account-box">
				<div class="account-name">

					<!--<div class="photo">-->
						<!--<img :src="BasicMemberAndMemberOperatorData.operatorPortraitUrl" v-if="BasicMemberAndMemberOperatorData.operatorPortraitUrl">-->
            <!--<img style="border: 0.05rem white solid" src="../../assets/images/IM_detail.png" v-else/>-->
					<!--</div>-->

          <el-upload class="avatar-uploader photo"
                     :action="uploadUrl"
                     :show-file-list="false"
                     :data="uploadData_des"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="BasicMemberAndMemberOperatorData.operatorPortraitUrl" :src="BasicMemberAndMemberOperatorData.operatorPortraitUrl"  class="avatar">
            <img style="border: 0.05rem white solid" class="el-icon-plus avatar-uploader-icon" src="../../assets/images/IM_detail.png" v-else/>
          </el-upload>

					<div class="input">
						<ul>
							<li><span>姓名</span><input type="text" v-model="BasicMemberAndMemberOperatorData.memberName" @keyup.enter="updatemember" /></li>
							<li><span>账号</span><input type="text" disabled="disabled" style="background: #fff;" v-model="BasicMemberAndMemberOperatorData.operatorAccount" /></li>
						</ul>

					</div>
				</div>
			</div>
			<div class="account-anquan">
				<p><span>账号安全</span><span>低</span></p>
			</div>
			<div class="form">
				<ul>
					<!--<li>姓名</li>
  				<li><input /></li>-->
					<li><span>QQ</span><input v-model="BasicMemberAndMemberOperatorData.operatorQq" @keyup.enter="updatemember" @blur="updatemember" /></li>
				</ul>
			</div>
		</div>
		<div class="footer" @click="appLogout">
			退出
		</div>
	</div>
</template>

<script>
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui'; //引入弹框
	export default {
  name: 'index',
  data () {
    return {
    	BasicMemberAndMemberOperatorData:{},
      uploadUrl:"/v3/misc/common/uploadFile",
      uploadData_des: {
        "moduleName": "Member",
        "fileName": "会员头像"
      }
    }
  },
  methods:{
		members(){
			this.axios({
					method: 'GET',
					url: "/v3/basic/members/" + localStorage.getItem("memberCode"),
					data: {}
				}).then((res) => {
					this.BasicMemberAndMemberOperatorData = res.data;
				}).catch((err) => {

				});
			},
			updatemember() {
				this.axios({
					method: 'PUT',
					url: "/v3/basic/members/" + localStorage.getItem("memberCode"),
					data: {
						"memberName": this.BasicMemberAndMemberOperatorData.memberName,
						"operatorQq": this.BasicMemberAndMemberOperatorData.operatorQq,
						"operatorPhone": this.BasicMemberAndMemberOperatorData.operatorPhone,
					}
				}).then((res) => {
					Toast({
						message: '修改成功',
						iconClass: 'fontSize iconfont icon-chenggong'
					});
				}).catch((err) => {
					Toast({
						message: err.response.data,
						iconClass: 'fontSize iconfont icon-shibai'
					});
				});
			},
			appLogout() {
				MessageBox({
					title: '提示',
					message: '请确认是否退出？',
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					confirmButtonClass: 'redBg',
					showCancelButton: true
				}).then(btnType => {
					if(btnType == 'confirm') {
						this.axios({
							method: 'POST',
							url: "/v3/member/appLogout",
						}).then((res) => {
							this.$router.push({path:"/landing"})
							localStorage.removeItem("memberCode");
						}).catch((err) => {});
					}
				})

			},
    //上传图片
    handleAvatarSuccess(res, file) {
      this.BasicMemberAndMemberOperatorData.operatorPortraitUrl = URL.createObjectURL(file.raw);

      this.axios({
        method: 'PUT',
        url: "/v3/basic/members/" + localStorage.getItem("memberCode"),
        data: {
          "memberName": this.BasicMemberAndMemberOperatorData.memberName,
          "memberCode": this.BasicMemberAndMemberOperatorData.memberCode,
          "operatorPortraitUrl": this.BasicMemberAndMemberOperatorData.operatorPortraitUrl,
          "operatorPhone": this.BasicMemberAndMemberOperatorData.operatorPhone,
        }
      }).then((res) => {
        Toast({
          message: '修改成功',
//          iconClass: 'fontSize iconfont icon-chenggong'
        });
      }).catch((err) => {
        Toast({
         // message: err.response.data,
          //message: "上传失败"
        });
      });

    },
    //上传文件格式判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //返回上一步
  	vfun_back(){
  		history.back();
		this.updatemember();
  	},

  },
  activated(){
  	this.members();
  },
  mounted(){
  	this.members();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

*{
	transition: 0.2s;
}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}
.index{
	box-sizing: border-box;
	background: #d2d3d9;
}

.account-box{
	background: #fff;
	margin-top: 1.2rem;
}
.account-name{
	display: -webkit-box;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 0.1rem;
}
.account-name > div{

}
.photo{
	text-align: center;
	padding:  5% 0;
	padding-right: 5%;
	padding-bottom: 2%!important;
}
.photo img{
	display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  text-align: center;
}
.input{
	margin-top: 0.25rem;
}
.input li{
	/*height: 0.8rem;*/
	padding: 0.2rem 0;
	box-sizing: border-box;
}
.input li:first-child{
	border-bottom: 1px solid #bbb;
}
.input input{
	border: 0;
	text-indent:0.2rem;
}
.input span{
	position: relative;
	top:-2px;
}
.input{
	padding-right: 1%;
	-webkit-box-flex: 1;
}
.account-box{
	border-bottom: 1px solid #bbb;
}
.account-anquan{
	margin-top: 0.2rem;
	border-top:1px solid #bbb ;
	border-bottom:1px solid #bbb ;
	background: #fff;
}
.account-anquan p{
	box-sizing: border-box;
	padding: 6%;
	overflow: hidden;
	font-size: 15px;
}
.account-anquan span:first-child{
	float: left;
}
.account-anquan span:last-child{
	float: right;
  margin-right: 6px;
  color: #D50B0A;
}
.form{
	margin-top: 0.2rem;
	border-top:1px solid #bbb ;
	background: #fff;
	padding: 6%;
}
.form ul li{
	font-size: 15px;
	border-bottom: 1px solid #bbb;
	padding: 0.25rem 0;
}
.form input{
	border: 0;
	text-indent:0.2rem;
}
.form ul li:last-child input{
	text-indent:0.35rem;
}
.footer{
	position: fixed;
	bottom: 0.5%;
	width: 98%;
	left: 1%;
	text-align: center;
	color: #fff;
	height: 1.4rem;
	background: #D50B0A;
	line-height: 1.4rem;
  font-size: 16px;
	border-radius:4px ;
}
/*上传图片 Start*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 1.5rem;
  height:1.5rem;
  line-height: 1.5rem;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/*上传图片 End*/
</style>

